<template>
  <process-video
    :title="meeting.title"
    :img="preview"
    v-if="type==='history'"
    @enter="handleConferenceUser"
  >
    <div>
      <div>会议时间：{{meeting.actuallyStartTime}}</div>
      <div>
        参会人员：
        <span
          v-if="members.length===0"
          class="yellow"
        >会议成员加载中......</span>
        <span
          v-for="(person,index) in members"
          :key="person.userId"
          :class="index===0?'hoster':''"
        >
          {{person.userName}}
        </span>
      </div>
    </div>
    <template
      v-if="type==='history'"
      slot="ctrl"
    >
      <i
        class="icon el-icon-delete"
        @click.stop="handleDeleteClick"
      />
    </template>
  </process-video>
  <picture-card
    v-else-if="type==='ready'"
    :title="meeting.title"
    @enter="handleConferenceUser"
  >
    <div>会议室号：{{meeting.meetingNumber}}</div>
    <div>会议时间：{{meeting.actuallyStartTime||meeting.estimatedStartTime}}</div>
    <div>
      参会人员：
      <span
        v-if="members.length===0"
        class="yellow"
      >鼠标悬浮查看</span>
      <span
        v-for="(person,index) in members"
        :key="person.userId"
        :class="index===0?'hoster':''"
      >
        {{person.userName}}
      </span>
    </div>
    <div
      class="btn-group"
      v-if="isHost"
    >
      <el-button
        type="success"
        plain
        size="mini"
        :loading="startLoading"
        icon="el-icon-video-play"
        @click="handleStartConfenrence(meeting.cid)"
      >开始会议</el-button>
      <el-button
        type="danger"
        plain
        size="mini"
        icon="el-icon-circle-close"
        @click="handleCancelConference(meeting.cid)"
      >取消会议</el-button>
      <el-button
        type="warning"
        plain
        size="mini"
        icon="el-icon-edit"
      >编辑会议</el-button>
    </div>
    <div
      class="btn-group"
      v-else
    >
      <el-button
        type="text"
        disabled
      >会议暂未开始</el-button>
    </div>
  </picture-card>
  <picture-card
    v-else
    :title="meeting.title"
    @enter="handleConferenceUser"
  >
    <div>会议室号：{{meeting.meetingNumber}}</div>
    <div>会议时间：{{meeting.actuallyStartTime||meeting.estimatedStartTime}}</div>
    <div>
      参会人员：
      <span
        v-if="members.length===0"
        class="yellow"
      >会议成员加载中......</span>
      <span
        v-for="(person,index) in members"
        :key="person.userId"
        :class="index===0?'hoster':''"
      >
        {{person.userName}}
      </span>
    </div>
    <div class="btn-group">
      <el-button
        plain
        type="success"
        size="mini"
        @click="openMeetingRoom(meeting.cid)"
      >进入会议</el-button>
    </div>
  </picture-card>
  <!-- <div
    v-else-if="type==='ready'"
    class="card-box"
    @mouseenter="handleConferenceUser"
  >
    <div class="card">
      <div class="title">主题：{{meeting.title}}</div>
      <div>会议室号：{{meeting.meetingNumber}}</div>
      <div>会议时间：{{meeting.actuallyStartTime||meeting.estimatedStartTime}}</div>
      <div>
        参会人员：
        <span
          v-if="members.length===0"
          class="yellow"
        >鼠标悬浮查看</span>
        <span
          v-for="(person,index) in members"
          :key="person.userId"
          :class="index===0?'hoster':''"
        >
          {{person.userName}}
        </span>
      </div>
      <div
        class="btn-group"
        v-if="isHost"
      >
        <el-button
          type="success"
          plain
          size="mini"
          :loading="startLoading"
          icon="el-icon-video-play"
          @click="handleStartConfenrence(meeting.cid)"
        >开始会议</el-button>
        <el-button
          type="danger"
          plain
          size="mini"
          icon="el-icon-circle-close"
          @click="handleCancelConference(meeting.cid)"
        >取消会议</el-button>
        <el-button
          type="warning"
          plain
          size="mini"
          icon="el-icon-edit"
        >编辑会议</el-button>
      </div>
      <div
        class="btn-group"
        v-else
      >
        <el-button
          type="text"
          disabled
        >会议暂未开始</el-button>
      </div>
    </div>
  </div>
  <div
    v-else
    class="card-box"
    @mouseenter="handleConferenceUser"
  >
    <div class="card">
      <div class="title">{{meeting.title}}</div>
      <div>会议室号：{{meeting.meetingNumber}}</div>
      <div>会议时间：{{meeting.actuallyStartTime||meeting.estimatedStartTime}}</div>
      <div>
        参会人员：
        <span
          v-if="members.length===0"
          class="yellow"
        >鼠标悬浮查看</span>
        <span
          v-for="(person,index) in members"
          :key="person.userId"
          :class="index===0?'hoster':''"
        >
          {{person.userName}}
        </span>
      </div>
      <div class="btn-group">
        <el-button
          plain
          type="success"
          size="mini"
          @click="openMeetingRoom(meeting.cid)"
        >进入会议</el-button>
      </div>
    </div>
  </div> -->
</template>

<script>
import open from '@/mixin/open'
import {
  conferencesMemberInfo,
  startConference,
  cancelConference,
  dismissConferences
} from '@/api/conferences'
import { mapGetters } from 'vuex'
export default {
  name: 'MeetingCard',
  mixins: [open],
  props: {
    type: {
      type: String,
      required: true
    },
    meeting: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      members: [],
      startLoading: false,
      images: [
        'https://user-images-1257142679.cos.ap-chengdu.myqcloud.com/20301cce36165fdf24570c336514494b',
        'https://user-images-1257142679.cos.ap-chengdu.myqcloud.com/f81e311ae2165828349f487f67ae3904',
        'https://user-images-1257142679.cos.ap-chengdu.myqcloud.com/db058b67f9791a11531b99f59011a06c',
        'https://user-images-1257142679.cos.ap-chengdu.myqcloud.com/10b50df16e6ec36c0f58d1bf7af89a29'
      ]
    }
  },
  computed: {
    ...mapGetters({
      userId: 'userId'
    }),
    preview () {
      if (this.meeting.status === 5) {
        if (this.meeting.videoPreviewPath) {
          return {
            src: this.meeting.videoPreviewPath,
            row: 4,
            col: 4,
            total: 16
          }
        } else {
          return undefined
        }
      } else {
        return {
          src: this.images[1],
          row: 1,
          col: 1,
          total: 1
        }
      }
    },
    isHost () {
      return this.userId === this.meeting.founderId
    }
  },
  methods: {
    // 点击卡片
    openMeetingDetail () {
      const cid = this.meeting.cid
      switch (this.type) {
        case 'history':
          this.$router.push({
            name: 'MeetingInfo',
            query: { conferenceId: cid }
          })
          break
        default:
          break
      }
    },
    // 取消会议
    async handleCancelConference (cid) {
      try {
        await this.$confirm('是否要取消会议，会议取消无法恢复?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          lockScroll: false
        })
        await cancelConference(cid)
        this.$emit('refresh', 'ready')
        this.$message.success('会议已被取消')
      } catch {
        this.$message.info('操作被取消')
      }
    },
    // 开始会议
    async handleStartConfenrence (cid) {
      if (this.meeting.founderId === this.userId) {
        this.startLoading = true
        await startConference(cid)
        this.startLoading = false
        this.openMeetingRoom(cid)
        this.$emit('meetingState')
      } else {
        this.$message.info('会议尚未开始')
      }
    },
    // 获取会议成员
    async handleConferenceUser () {
      if (this.members.length !== 0) { return }
      const { cid } = this.meeting
      const { data } = await conferencesMemberInfo(cid)
      this.members = data
    },
    // 删除会议
    async handleDismissConferences (cid) {
      await dismissConferences(cid)
      this.$emit('refresh', 'history')
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-group {
  margin-top: 10px;
}
.icon {
  color: $red;
}
.hoster {
  font-weight: bold;
  color: yellow;
}
</style>
